<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div data-widget-name="menu" data-user-name="jack" id="box">
      Choose the genre
    </div>

    <script>
      /*
      1. 自定义的 data 特性可以使用多个单词，每个但是使用短横线分割
      2. 多单词转换对象时候，从第二个单词开始首字母大写
        
        */
      const box = document.getElementById("box");

      console.log(box.dataset);
      console.log(box.dataset.userName);
      console.log(box.dataset.widgetName);
      //   console.log(box.getAttribute("data-widget-name"));
    </script>
  </body>
</html>
